<template>
  <div class="payment-container">
    <div @click="fly('/')">首页</div>
    <div class="header">支付信息</div>
    <div class="store-name">好好好旗舰店</div>
    <span v-if="f == 1">
      <div class="order-items">
      <div  class="order-item">
        <div class="item-details">
          <img :src="require('@/assets/' + this.img)" alt="Product Image" class="product-image"/>
          <div class="product-info">
            <div class="product-name">{{ this.pron }}</div>
            <div class="product-price">价格: ¥{{ this.cost }}</div>
          </div>
        </div>
        <div class="product-count"> 租期为{{ this.count }}{{ this.time }}</div>
      </div>
    </div>
    </span>
    <span v-else>
      <div class="order-items">
      <div v-for="item in arr" :key="item.id" class="order-item">
        <div class="item-details">
          <img :src="require('@/assets/' + item.img)" alt="Product Image" class="product-image"/>
          <div class="product-info">
            <div class="product-name">{{ item.pron }}</div>
            <div class="product-price">价格: ¥{{ item.cost }}</div>
          </div>
        </div>
        <div class="product-count"> 租期为{{ item.count }}{{ item.time }}</div>
      </div>
    </div>
    </span>


    <div class="header">收货信息</div>
    <div class="shipping-info">
      <el-form ref="userForm" :model="user" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="user.address"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
      </el-form>
      <span v-if="f == 1">
      <div class="total-price">总价：¥{{ this.sum=this.count*this.cost }}元</div>
      </span>
      <span v-else>
      <div class="total-price">总价：¥{{ this.sum }}元</div>
      </span>
      <el-button type="primary" class="submit-button" @click="fly()">提交订单</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    let result = this.$route.query.id;
    return {
      sum: localStorage.getItem('sum'),
      arr: null,
      user: {},
      Id: result,
      arr1:{},
      img:localStorage.getItem('img'),
      pron:localStorage.getItem('pron'),
      count:localStorage.getItem('count'),
      cost:localStorage.getItem('cost'),
      time:localStorage.getItem('time'),
      f:localStorage.getItem('f'),
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    async load() {
      this.arr = JSON.parse(localStorage.getItem('cart')) || [];
      let result = await this.$axios.get('/userId/' + this.Id);
      this.user = result.data;
      this.arr1.img=this.img
      this.arr1.pron=this.pron
      this.arr1.count=this.count
      this.arr1.cost=this.cost
      this.arr1.time=this.time
      console.log(this.arr1)
      localStorage.setItem('buy',JSON.stringify(this.arr1))
      console.log(JSON.parse(localStorage.getItem('buy')))
    },
    async fly() {
      localStorage.setItem('fool', '2')
      localStorage.setItem('id',this.Id)
      console.log(this.sum)
      location.href='http://localhost:8090/alipay/'+parseFloat(this.sum)+'/'+this.Id

      console.log("xixi")
    }
  }
}
</script>

<style scoped>
.payment-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 30px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.header {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #333;
}

.store-name {
  font-size: 20px;
  color: #555;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.order-items {
  margin-bottom: 30px;
}

.order-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fafafa;
}

.item-details {
  display: flex;
  align-items: center;
  width: 100%;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 20px;
}

.product-info {
  flex-grow: 1;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.product-price {
  font-size: 16px;
  color: #666;
}

.product-count {
  margin-left: auto;
  font-size: 16px;
  color: #666;
}

.shipping-info {
  background-color: #f9f9f9;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-form {
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.total-price {
  font-size: 24px;
  font-weight: bold;
  color: #FF6347;
  margin-bottom: 20px;
  text-align: right;
}

.submit-button {
  display: block;
  width: 100%;
  padding: 15px;
  font-size: 18px;
  border-radius: 8px;
  background-color: #409EFF;
  border-color: #409EFF;
  color: white;
  margin-top: 20px;
}

.submit-button:hover {
  background-color: #337ecc;
  border-color: #337ecc;
}
</style>